<template>
	<view class="page" :style="{ background: bgColor, paddingTop: `${statusBarHeight}px` }">
		<u-sticky>
			<!-- #ifdef APP -->
			<view class="top-bar" :style="{ background: bgColor }">
				<view class="top-bar__l">
					<text :class="active == 0 ? 'active' : ''" @click="changeTab('0')">关注</text>
					<text :class="active == 1 ? 'active' : ''" @click="changeTab('1')">广场</text>
				</view>
				<view class="top-bar__r">
					<u-icon name="search" :size="24" color="#232832" @click="goSearch()"></u-icon>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="top-bar" :style="{ background: bgColor }">
				<view class="top-bar__l">
					<text :class="active == 0 ? 'active' : ''" @click="changeTab('0')">关注</text>
					<text :class="active == 1 ? 'active' : ''" @click="changeTab('1')">广场</text>
				</view>
				<view class="top-bar__r">
					<u-search disabled :showAction="false" bgColor="#E9E9E9"></u-search>
				</view>
			</view>
			<!-- #endif -->
		</u-sticky>
		<z-paging ref="paging" fixed refresher-only class="paging" :data-key="1"
			:style="{top: `${statusBarHeight + 88}px`, bottom: `${safeAreaBottom + 60}px`}" refresher-vibrate
			refresher-background="transparent" safe-area-inset-bottom @query="onRefresh" show-refresher-when-reload
			show-refresher-update-time refresher-update-time-key="tab1" @scroll="onScroll">
			<Attention class="attention" v-show="active == '0'" v-if="initPage[0]" />
			<Lastest class="lastest" v-show="active == '1'" v-if="initPage[1]" />
		</z-paging>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	import Attention from '../tab1/attention.vue'
	import Lastest from '../tab1/lastest.vue'
	export default {
		mixins: [mixins],
		components: {
			Attention,
			Lastest
		},
		data() {
			return {
				clickTime: 0,
				active: 1,
				initPage: [false, true],
				focus: [{}],
				latest: []
			}
		},
		computed: {
			bgColor() {
				if (this.active == '0') {
					if (this.focus.length == 0) {
						return '#FFFFFF'
					}
					return '#F4F4F7'
				} else {
					return '#FFFFFF'
				}
			},
		},
		created() {
			console.log('init tab1');
			uni.$on('tab1Focus', rs => {
				this.focus = rs.data
			})
		},
		mounted() {
			this.setContentHeight(this.active == '1' ? '.lastest' : '.attention')
		},
		methods: {
			changeTab(index) {
				this.$refs.paging.endRefresh()
				if (!this.initPage[index]) {
					this.initPage[index] = true
				}
				this.clickTime++
				if (index == this.active) {
					if (this.clickTime == 1) {
						// this.$refs.paging.scrollToTop()
					} else if (this.clickTime == 2) {
						this.$refs.paging.reload()
					}
				} else {
					this.active = index
					this.clickTime = 0
				}
				this.timer = setTimeout(() => {
					this.clickTime = 0
				}, 350)
			},
			previewImg(img) {
				uni.previewImage({
					urls: [img]
				})
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/common/search',
					animationType: 'slide-in-left'
				})
			}
		},
		beforeDestroy() {
			this.timer && clearTimeout(this.timer)
			uni.$off('tab1Focus')
		}
	}
</script>

<style scoped lang="scss">
	@import url('./common.scss');

	.page {
		padding-bottom: 20px;
		box-sizing: border-box;
	}

	.top-bar {
		display: flex;
		align-items: center;
		/* #ifdef MP-WEIXIN */
		flex-direction: column;
		justify-content: center;
		/* #endif */
		padding: 0 10px 10px;
		box-sizing: border-box;

		&>view {
			width: 100%;
			color: #787B86;
		}

		&__l {
			width: 100%;
		}

		text {
			padding: 0 10px;
			font-size: 17px;
			line-height: 22px;
			font-weight: 500;
		}

		.active {
			color: #232832;
			font-size: 20px;
			line-height: 22px;
		}
		
		&__r {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 10px;
		}
	}
</style>